<template>
  <v-form ref="myBrandDelete">
    <v-text-field v-model="brand.name" label="请输入品牌名称" required hint="例如:oppo" :rules="[rules.required,rules.nameLength]"></v-text-field>
    <v-text-field v-model="brand.letter" label="请输入品牌首字母" required hint="例如:O" :rules="[rules.letter]"></v-text-field>
    <v-cascader
      url="/item/category/list"
      multiple
      required
      v-model="brand.categories"
      label="请选择商品分类"/>
    <v-layout row>
      <v-flex xs3><label style="color: rgba(0,0,0,.54); font-size: 16px">品牌LOG：</label></v-flex>
      <v-flex>
        <v-upload
          v-model="brand.image"
          url="/upload/image"
          :multiple="false"
          :pic-width="250" :pic-height="90"
        />
      </v-flex>
    </v-layout>
    <v-layout row my-3>
      <v-btn @click="closeDialog()" color="primary">关闭</v-btn>
      <v-spacer/>
      <v-btn @click="sureToDelete()" color="error">删除</v-btn>
    </v-layout>
  </v-form>
</template>

<script>
    export default {
        name: "my-brand-delete",
      data(){

        return {
          valid:false,
          brand:{
            name:'', //品牌名称
            letter:'', //首字母大写
            image:'', //图片
            categories:[] //所属标签
          },
          rules:{
            required:value => !!value || '品牌名必须填写',
            nameLength: value => value.length >=1 || '品牌名长度必须大于1',
            letter: value => /^[A-Z]{1}$/.test(value) || "品牌的首字母必须为1位大写字母"
          }
        }
      },
      props:{
        oldBrand:{
          type:Object
        },
      },
      methods:{
        closeDialog(){
          this.$emit("closedelete");
        },
        sureToDelete(){
          //alert(this.oldBrand.id);
            this.$http.delete("/item/brand/"+this.oldBrand.id).then(()=>{
              //删除成功
              this.$emit("closedelete");
              this.$message.success("删除成功")
            }).catch(()=>{
              this.$message.error("删除失败")
            })
        },
      },
      watch:{
        oldBrand:{ //监控oldBrand的变化
          handler(val){
            if(val){
              //注意,不要直接赋值,否则会影响到父组件的数据,copy属性即可
              this.brand = Object.deepCopy(val);
            }else {
              this.brand={
                name:'', //品牌名称
                letter:'', //首字母大写
                image:'', //图片
                categories:[] //所属标签
              }
            }
          },
          deep:true

        }
      }

    }
</script>

<style scoped>

</style>
